<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 400px;
      height: 400px;
      background-color: #0a0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
/*
1.给一个元素注册touchstart事件

2.在touchstart事件里面，记录开始位置和开始时间

3.给一个元素注册touchend事件

4.记录结束位置和结束时间

5.把位置和时间相减，再判断


6.判断是否单个手指
*/

var box =document.querySelector('.box');
function tap(element,callback,offset,timespan){
  offset=offset||50;
  timespan=timespan||300;

var startX,startY,startTime;

box.addEventListener('touchstart',function(e){
  // 判断是否是一个手指按下
  if(e.touches.length != 1){
    console.log('已经不是一个手指的操作了');
    return;
  }
  // 记录开始位置
  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
  // 记录开始的时间
  startTime = Date.now();
})

box.addEventListener('touchend',function(e){
  // 判断是否只有一个手指
  if(e.changedTouches.length != 1){
    console.log('不是单击操作');
    return;
  }
  // 记录结束位置
  var endX = e.changedTouches[0].pageX;
  var endY = e.changedTouches[0].pageY;
  // 记录结束时间
  var endTime = Date.now();
  // 计算，判断
  if(endTime - startTime > 300){
    // 不是单击，是长按
    console.log('是长按了');
    return;
  }
  // 希望开始和结束之间的距离不要超过50 - 要计算一下绝对值，因为我们滑动的方向可能不确定
  if(Math.abs(endX - startX) >= 50 || Math.abs(endY - startY) >= 50){
    console.log('滑动了太多的位置');
    return;
  }
  console.log('这就是一个tap事件');
  // 如果是一个单击tap事件，就应该调用一个函数
  callback && callback();
})
}
tap(box,function(){
  box.style.backgroundColor='red';
})
</script>
</html>